<template>
  <div :class="prefixCls" class="relative w-full h-full">
    <AppDomainPicker
      v-if="domainList.length > 1"
      class="absolute top-4 right-4 z-30 enter-x xl:text-gray-600"
      :showText="false"
      :domainList="domainList"
      iconColor="text-black"
    />
    <span class="-enter-x xl:hidden">
      <AppLogo :alwaysShowTitle="true" />
    </span>

    <div
      class="container-bg container relative h-full py-2 mx-auto sm:px-2"
      style="max-width: 100%"
    >
      <img class="img1 img1-1" src="../../../../assets/logo-bg-2.png" alt="" />
      <img class="img1" src="../../../../assets/logo-bg-3.png" alt="" />
      <img class="img1" src="../../../../assets/bg.webp" alt="" />

      <div class="container-bg-2 flex h-full">
        <div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-3/5">
          <AppLogo class="-enter-x" />
          <div class="my-auto">
            <!-- <img :alt="title" src="../../../assets/svg/login-box-bg.svg" class="w-11/12 mt-24" /> -->
            <!-- <div class="mt-10 font-medium text-white -enter-x">
              <span class="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
            </div>
            <div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
              {{ t('sys.login.signInDesc') }}
            </div> -->
          </div>
        </div>
        <div class="container-bg-3 flex w-full h-full py-15 xl:h-auto xl:py-0 xl:my-0 xl:w-2/6">
          <div
            :style="'border-radius: 1rem;'"
            :class="`${prefixCls}-form`"
            class="relative w-full px-5 py-6 xs:mx-auto my-auto rounded-md shadow-md xl:bg-transparent sm:px-6 xl:px-8 xl:pt-12 xl:pb-6 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
          >
            <LoginForm />
            <ForgetPasswordForm />
            <RegisterForm />
            <MobileForm />
            <QrCodeForm />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { AppLogo, AppDomainPicker } from '/@/components/Application';
  import type { DropMenu } from '/@/components/Dropdown';
  import LoginForm from './LoginForm.vue';
  import ForgetPasswordForm from './ForgetPasswordForm.vue';
  import RegisterForm from './RegisterForm.vue';
  import MobileForm from './MobileForm.vue';
  import QrCodeForm from './QrCodeForm.vue';
  import { useDesign } from '/@/hooks/web/useDesign';

  defineProps({
    sessionTimeout: {
      type: Boolean,
    },
    domainList: {
      type: Array as PropType<DropMenu[]>,
      default: () => [],
    },
  });
  const { prefixCls } = useDesign('login');
</script>

<style lang="less">
  @prefix-cls: ~'@{namespace}-login';
  @logo-prefix-cls: ~'@{namespace}-app-logo';
  @countdown-prefix-cls: ~'@{namespace}-countdown-input';
  @form-prefix-cls: ~'@{namespace}-login-form';
  @title-prefix-cls: ~'@{namespace}-login-form-title';

  @dark-bg: #293146;

  html[data-theme='dark'] {
    .@{prefix-cls} {
      background-color: @dark-bg;

      &::before {
        background-image: url(/@/assets/svg/login-bg-dark.svg);
      }

      .ant-input,
      .ant-input-password {
        background-color: #232a3b;
      }

      .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
        border: 1px solid #4a5569;
      }

      &-form {
        background: transparent !important;
      }

      .app-iconify {
        color: #fff;
      }
      .@{title-prefix-cls} {
        color: #fff;
      }
    }

    input.fix-auto-fill,
    .fix-auto-fill input {
      -webkit-text-fill-color: #c9d1d9 !important;
      box-shadow: inherit !important;
    }
  }

  .@{prefix-cls} {
    min-height: 100%;
    overflow: hidden;
    @media (max-width: @screen-xl) {
      background-color: #293146;

      .@{prefix-cls}-form {
        background-color: #fff;
      }
    }

    .container-bg {
      position: relative;

      .img1 {
        // width: 100%;
        // width: auto;
        height: 110%;
        transform: scale(1.09);
        // transform-origin: 1300px 100px;
        // transform-origin: 0px 0px;
        position: absolute;
        top: -50px;
        left: 80px;
        @media (max-width: 1919px) {
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          transform: scale(1.1);
        }
        @media (max-width: @screen-xl) {
          display: none;
        }
      }

      .img1-1 {
        // left: 48px;
        // top: 10px;
      }

      // .img2 {
      //   transform-origin: 300px 1600px;
      //   transform: scale(1.08);
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   @media (max-width: @screen-xl) {
      //     display: none;
      //   }
      // }

      // .img3 {
      //   transform-origin: 300px 1600px;
      //   transform: scale(1.08);
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   @media (max-width: @screen-xl) {
      //     display: none;
      //   }
      // }
      // position: absolute;
      // top: 0;
      // left: 0;
      // width: 100%;
      // height: 100%;
      // background-image: url(/@/assets/logo-bg-2.png);
      // background-repeat: no-repeat;
      // background-size: auto 100%;
      // content: '';
      // @media (max-width: @screen-xl) {
      //   background-image: none;
      // }

      // .container-bg-2::before {
      //   position: absolute;
      //   top: 0;
      //   left: -1000px;
      //   width: 100%;
      //   height: 100%;
      //   background-image: url(/@/assets/bg.webp);
      //   background-repeat: no-repeat;
      //   background-size: auto 100%;
      //   content: '';
      //   @media (max-width: @screen-xl) {
      //     background-image: none;
      //   }
      // }

      .container-bg-2 {
        // margin: auto;
        // display: flex;
        // justify-content: space-between;

        // transform: scale(1.1);
        // transform-origin: 0 500px;
        // position: absolute;
        // top: 0;
        // left: 0;
        // width: 100%;
        // height: 100%;
        // background-image: url(/@/assets/logo-bg-3.png);
        // background-repeat: no-repeat;
        // background-size: auto 100%;
        // content: '';
        // @media (max-width: @screen-xl) {
        //   background-image: none;
        // }

        .container-bg-3 {
          // margin: auto;
          // display: flex;
          // justify-content: space-between;
          // position: absolute;
          // top: 0;
          // left: 0;
          margin-top: 35px;
          transform: scale(0.9);
          // transform-origin: 0 500px;
        }

        .container-bg-3::before {
          // position: absolute;
          // top: 0;
          // left: -1000px;
          // width: 100%;
          // height: 100%;
          // background-image: url(/@/assets/bg.webp);
          // background-repeat: no-repeat;
          // background-size: auto 100%;
          // content: '';
          // @media (max-width: @screen-xl) {
          //   background-image: none;
          // }
        }
      }
    }
    .@{logo-prefix-cls} {
      position: absolute;
      top: 0;
      height: 30px;

      &__title {
        font-size: 16px;
        color: #333333;
      }

      img {
        width: 34px;
      }
    }
    .@{title-prefix-cls} {
      color: #fff;
    }

    .ant-checkbox-wrapper {
      color: #fff;
    }

    .container {
      .@{logo-prefix-cls} {
        display: flex;
        align-items: center;
        position: absolute;
        top: 32px;
        left: 20px;

        &__title {
          font-size: 25px;
          color: #333;
          margin-left: 12px;
        }

        &__img {
          width: 28px;
          height: 28px;
        }
      }

      .@{form-prefix-cls} {
        background: rgba(252, 253, 255, 0.8);

        .login-btn {
          color: #fff;
          width: 100%;
          height: 48px;
          background: #2b63a1;
          border-radius: 4px 4px 4px 4px;
          opacity: 1;
        }

        .login-form-item {
          margin-bottom: 42px;
        }
      }
    }

    &-sign-in-way {
      .anticon {
        font-size: 22px;
        color: #888;
        cursor: pointer;

        &:hover {
          color: @primary-color;
        }
      }
    }

    input:not([type='checkbox']) {
      min-width: 300px;

      @media (max-width: @screen-xl) {
        min-width: 280px;
      }

      @media (max-width: @screen-lg) {
        min-width: 260px;
      }

      @media (max-width: @screen-md) {
        min-width: 240px;
      }

      @media (max-width: @screen-sm) {
        min-width: 160px;
      }
    }

    .ant-btn-primary {
      background: linear-gradient(0deg, #1889ec 0%, #18a9ec 100%);
    }

    .@{countdown-prefix-cls} input {
      min-width: unset;
    }

    .ant-divider-inner-text {
      font-size: 12px;
      color: @text-color-secondary;
    }
  }
</style>
